import * as echarts from 'echarts';
import { isNil } from "lodash-es";
import React from "react";
import { IProvinceGDP } from "../../core/interface";

export interface IProps {
    province: string;
    yearlyData: IProvinceGDP[];
}

/** 死亡率和健康设施对比图 */
const DeathAndHealthChart: React.FC<IProps> = (props) => {
    const { year, yearlyData, province } = props;
    const containerRef = React.useRef<HTMLDivElement>(null);
    const chartRef = React.useRef<echarts.ECharts>(null);

    const renderChart = () => {
        if (isNil(containerRef.current)) return;
        const { width, height } = containerRef.current.getBoundingClientRect();
        const chartWidth = width;
        const chartHeight = height;
        const option = {
            title: {
                text: `${province}死亡率和健康设施关系图`
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            // toolbox: {
            //     feature: {
            //         dataView: { show: true, readOnly: false },
            //         magicType: { show: true, type: ['line', 'bar'] },
            //         restore: { show: true },
            //         saveAsImage: { show: true }
            //     }
            // },
            legend: {
                data: ['健康设施', '死亡率'],
                bottom: '5%',
                left: 'center',
            },
            xAxis: [
                {
                    type: 'category',
                    data: yearlyData.map(item => item.year),
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '健康设施',
                    // min: 0,
                    // max: 250,
                    // interval: 50,
                    // axisLabel: {
                    //     formatter: '{value} ml'
                    // }
                },
                {
                    type: 'value',
                    name: '死亡率',
                    // min: 0,
                    // max: 25,
                    // interval: 5,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                }
            ],
            series: [
                {
                    name: '健康设施',
                    type: 'bar',
                    data: yearlyData.map(item => item.healthInstitutions),
                },
                {
                    name: '死亡率',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + '%';
                        }
                    },
                    data: yearlyData.map(item => item.deathRate),
                }
            ]
        };
        if (chartRef.current) {
            // update
            chartRef.current.setOption(option);
        } else {
            const chart = echarts.init(containerRef.current, undefined, {
                height: chartHeight,
                width: chartWidth,
            });

            chart.setOption(option);
            chartRef.current = chart;
        }
    };

    React.useEffect(() => {
        renderChart();
    }, [yearlyData, province]);

    return (
        <div className="bar-chart-for-health-contaienr" ref={containerRef} style={{
            width: '100%',
            height: '400px',
            display: 'inline-block',
            verticalAlign: 'top',
        }}>

        </div>
    );
};

export default DeathAndHealthChart;